<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
<!DOCTYPE html>
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title></title> 
<link href="${pageContext.request.contextPath}/static/css/base.css" rel="stylesheet">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/uimaker/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/uimaker/icon.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/providers.css">
</head> 
<body>
    <div class="container">
       <table id="dg" title="" style="width:100%;"
			data-options="
				rownumbers: true,
				singleSelect: true,
				animate: true,
				collapsible: true,
				fitColumns: true,
				pagination:true,
				url: '${pageContext.request.contextPath}/seller/data',
				method: 'get',
				toolbar: '#tb'
			">
		<thead>
			<tr>
				<th data-options="field:'id',width:80">ID</th>
				<th data-options="field:'name',width:60">店铺名</th>
				<th data-options="field:'mobile',width:80">手机号</th>
				<th data-options="field:'linkName',width:80">联系人</th>
			</tr>
		</thead>
	</table>
	<div id="tb" style="padding:0 30px;">
        <div class="opt-buttons">
            <a href="#" class="easyui-linkbutton add-btn" data-options="selected:true">新增</a>
        	<a href="#" class="easyui-linkbutton edit-btn">修改</a>
        	<a href="#" class="easyui-linkbutton del-btn">删除</a>
        </div>
      </div>
    </div>
    <div id="dlg" class="easyui-dialog" style="width:500px;height:350px;padding:10px 20px"
		data-options="buttons:'#dlg-buttons',closed:true">
		<form id="form0" method="post">
				<input type="hidden" name="id"/>
		      	<table class="kv-table">
					<tbody>
						<tr>
							<td class="kv-label">商家名称</td>
							<td class="kv-content">
								<input name="name" class="easyui-textbox" data-options="required:true"/>
							</td>
						</tr>
						<tr>
							<td class="kv-label">联系人</td>
							<td class="kv-content">
								<input name="linkName" class="easyui-textbox" data-options="required:true"/>
							</td>
						</tr>
						<tr id="password">
							<td class="kv-label">联系电话</td>
							<td class="kv-content">
								<input name="mobile" class="easyui-textbox" data-options="required:true"/>
							</td>
						</tr>
					</tbody>
				</table>
		</form>
	</div>
	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton save-btn">保存</a>
		<a href="#" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')">取消</a>
	</div>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript">
		$(function() {
			$('#dg').datagrid();
			
			$('.add-btn').on('click', function() {
				$('#form0').form('clear');
				$('#dlg').dialog('open').dialog('setTitle', '新增商家');
			});
			
			$('.del-btn').click(() => {
				var row = $('#dg').datagrid('getSelected');
				if (row) {
					// 进行删除
					$.messager.confirm(
            				'提示', 
            				'确定要删除吗?', 
            				function(r){
            					if(r === true) {
            						// js => java request ajax
            						$.getJSON(
            								'${pageContext.request.contextPath}/seller/del', 
            								{ "id" : row.id }, function(result) {
            									if (result.success === false){
            			            				$.messager.alert('错误', result.msg, 'error');
            			            			} else {
            			            				$('#dlg').dialog('close'); // 关闭模态框
            			            				$('#dg').datagrid('reload'); // 重新加载树
            			            				// 成功
            			            				$.messager.show({
            			            					title: '提示',
            			            					msg: result.msg
            			            				})
            			            			}
            								});
            						
            						
            					}
        			});
					
				} else {
					$.messager.alert('提示', '请选择一条需要删除的记录', 'info');
				}
			});
			
			$('.edit-btn').click(function() {
				var row = $('#dg').datagrid('getSelected');
				if (row) {
					// 进行修改
					$('#form0').form('load', row);
					$('#dlg').dialog('open').dialog('setTitle', '修改商家信息');
				} else {
					$.messager.alert('提示', '请选择一条需要修改的记录', 'info');
				}
			});
			
			
			$('.save-btn').on('click', () => {
				// 客户端的校验
				// 提交
				$('#form0').form('submit', {
					url:'${pageContext.request.contextPath}/seller/save',
					onSubmit: function(){
            			return $(this).form('validate');
            		},
					success:function(result) {
						result = JSON.parse(result);
						if (result.success === false){
            				$.messager.alert('错误', result.msg, 'error');
            			} else {
            				$('#dlg').dialog('close'); // 关闭模态框
            				$('#dg').datagrid('reload');
            				// 成功
            				$.messager.show({
            					title: '提示',
            					msg: result.msg
            				})
            			}
					}
				});
			});
		});
	</script>
</body> 
</html>
